<template>
    <div style="position: relative;display: flex; justify-content: center;align-items: center;">
      <div style="width: 8px; height: 14px;  position: relative;margin-top: 4px">
        <div :style="{
            position: 'absolute',
            left: `calc(50% - 1px)`,
            width: '2px',
            height: '100%',
            backgroundColor: this.isIncrease ? '#E33C3C' : '#19A579',
            margin: '0 auto'
        }">
        </div>
        <div :style="{top: top + '%',
          position: 'absolute',
          width: '100%',
          height: coarse + '%',
          backgroundColor: isIncrease ? '#E33C3C' : '#19A579'}"></div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'RenderCandleItem',
  props: {
    high: Number,
    low: Number,
    open: Number,
    close:Number

  },
  data(){
    return {
      top:0,
      coarse:0,
      isIncrease:false
    }
  },
  methods:{
   calc(){
      var high = this.high;
      var low = this.low;
      var open = this.open;
      var close = this.close;
      let total = high - low;

      this.isIncrease = close - open > 0;
      let coarse = Math.max(+(Math.abs(close - open) / total * 100).toFixed(2), 15);
      let top;
      if (this.isIncrease) {
        top = +(Math.abs(close - high) / total * 100).toFixed(2);
      } else {
        top = +(Math.abs(open - high) / total * 100).toFixed(2);
      }
      this.top = top;
      this.coarse = Math.min(100 - top, coarse);
   } 
  },
  mounted(){
    this.calc();
  }
}
</script>

<style scoped>

</style>
